<extend name="Public/base" />
<block name="title1"><{$goods.goods_name}></block>
<block name="css"> 
<link rel="stylesheet" href="__PUBLIC__/Css/Home/index/common.css" />
<link rel="stylesheet" href="__PUBLIC__/Css/Home/index/tmall.css" />
<link rel="stylesheet" href="__PUBLIC__/Css/Home/index/shop.css" />
</block>
<block name="main1">
	<a name='top'>
	<div id='msg' class="btn btn-warning" style="display:none;position:fixed;z-index:100;margin-left:700px;"></div>		
	<a href='#top'class="btn btn-warning" style="display:block;position:fixed;z-index:100;right:100px;bottom:80px;">返回顶部</a>		

 <div id="container">
            <div class="yHeader">
                <!--导航start-->
                <div class="yNavIndex">
                	<ul class="yMenuIndex">
                        <li><a href="<{:U('index')}>" class="yMenua">首页</a></li>
						<volist name='cates' id='vo'>
						 <li><a href="javascript:void(0)" target="_blank" ><{$vo.cate_name}></a></li>	
						</volist>
                    </ul>
				</div>
			</div>	
	</div>
<div class='title'><a href="<{:U('index')}>" class="yMenua">首页</a>><{$fcate.顶级分类}>><{$fcate.二级分类}></div>		
<div id='shop'>
	<div class='shopimg'>
		<div id='big'>
		    <img src="__ROOT__/Uploads/prod/<{$goods.goods_pic}>" alt="" width=520 height=355 />
		</div>
		<div id='small'>
		<volist name='attr_pic' id='vo'>	
		   <img src="__ROOT__/Uploads/prod/<{$vo}>" alt="" width=117 height=80 align='center' />	
		</volist>
		</div>
	</div>
	<div class='shopdetail'>
		<p class='title'><{$goods.goods_name}></p>
		<p>商品描述:<{$goods.goods_desc}></p>
		<div class='price'>价格:&nbsp;<span>￥<{$goods.goods_price}></span></div>
		<div class='box'><div class='attr_val'><{$val[0]['attr_name']}></div><volist name='val' id='vo'><div class='val' data-val='0' ><{$vo.attr_val}></div></volist></div>
		<div class='box'><div class='attr_val'><{$color[0]['attr_name']}></div> <volist name='color' id='vo'> <div class='col' data-color='0'><{$vo.attr_val}></div></volist></div>
		<div class='box'><div class='attr_val'><{$mem[0]['attr_name']}></div><volist name='mem' id='vo'><div class='mem' data-mem='0'><{$vo.attr_val}></div></volist></div>
		<br/>
		<br/>
		<hr/>
		 <div class='num'>
    	 	数量: 
				<a href="javascript:(0)"id='re'>-</a>   
				<input type="text" id='num' value='1'/>
				<a href="javascript:(0)" id='plus'>+</a>
		   <button id='buy'>加入购物车</button>
		 </div>
	</div>
</div>

<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">	
			<div class="tabbable" id="tabs-230395">
				<ul class="nav nav-tabs">
					<li class="active">
						 <a href="#panel-493205" data-toggle="tab">商品详情</a>
					</li>
					<li>
						 <a href="#panel-732166" data-toggle="tab">商品评价</a>
					</li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active" id="panel-493205">
						<volist name='attr_pic' id='vo'>
			                <img src="__ROOT__/Uploads/prod/<{$vo}>" alt="" width=800  style='margin-left:80px;'/><br />
		                </volist>
					</div>
					<div class="tab-pane" id="panel-732166">
						<div class="panel panel-default">
							<volist name='comments' id='vo'>
							<div id="type_<{$vo.id}>">
								<div class="panel-heading" >
									<h3 class="panel-title">
									<eq name='Think.session.username' value='$vo.user_name'>
										用户名:<{$vo.user_name}>
										<elseif condition="$Think.session.username eq rose"/>
										用户名:<{$vo.user_name}>
										<else/>
										用户名:****
										</eq>
									</h3>
									<h2><{$vo.add_time|date="Y-m-d H:i:s",###}></h2>		
								</div>
								<div class="panel-body" id="resp_<{$vo.id}>">
									<{$vo.content}>
								</div>
								<div class="panel-footer">
									<p align='right'>
										<if condition="$Think.session.username eq rose">
										<a class="resp" href="javascript:void(0)"  data-id="<{$vo.id}>">回复</a>	
									    <a class="del" href="javascript:void(0)" data-id="<{$vo.id}>">删除</a><br />									
										<textarea name="comment" id="comment_<{$vo.id}>" style='display:none;width:800px;height:100px;resize:none;'></textarea>
										<a href="javacript:void(0)" class='doresp' data-res="<{$vo.id}>" style='display:none;'>确认回复</a>
										</if>	
									</p>	
								</div>
							</div>	
							</volist>
						</div>   
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	
<script>
	$(function(){
  $("#small img").mouseover(function(){
      var small=$(this).attr('src');
	  $('#big img').attr('src',small);
  })
  $(document).on('click','.val',function(){
	  	$('.val').css('border','1px solid #F5F5F5');
	  	$(this).css('border','1px solid #01BEF6');
		$('.val').attr('data-val',0);
		$(this).attr('data-val',1);
	 
  });
    $('.col').click(function(){
		$('.col').css('border','1px solid #F5F5F5');
	  	$(this).css('border','1px solid #01BEF6');
	    $('.col').attr('data-color',0);
	  	$(this).attr('data-color',1);	 
  });
    $('.mem').click(function(){
		$('.mem').css('border','1px solid #F5F5F5');
	  	$(this).css('border','1px solid #01BEF6');
		$('.mem').attr('data-mem',0);
		  $(this).attr('data-mem',1);
	 
  });
  $('#re').click(function(){
  	var num=$('#num').val();
	num--
	if(num>=1){
		$('#num').val(num);
        return false;
	}
});
	$('#plus').click(function(){
	  	var num=$('#num').val();
		num++;
		if(num<10){
			$('#num').val(num);
	        return false;
		}
  });  	
  $('#buy').click(function(){
    var user="<{$Think.session.username}>";
  	var shopid="<{$goods.id}>";
  	var color=$('div[data-color=1]').text();
  	var val=$('div[data-val=1]').text();
  	var mem=$('div[data-mem=1]').text();
  	var num=$('#num').val();
	if(user==''){
		location.href="<{:U('User/login')}>";
		return false;
	}
	if(color=='' || val=='' || mem==''){
		$('#msg').text("请选择商品属性");
		$('#msg').css('display','block');
        setTimeout(function(){$('#msg').fadeOut('slow');},2000);
		return false;
	}
	$.post("<{:U('addcart')}>",{user:user,id:shopid,color:color,mobtype:val,memory:mem,num:num},function(data){
		if(data.status==1){
			$('#msg').text(data.msg);
			$('#msg').css('display','block');
			setTimeout(function(){$('#msg').fadeOut('slow');},2000);
		}else{
			$('#msg').text(data.msg);
			$('#msg').css('display','block');
            setTimeout(function(){$('#msg').fadeOut('slow');},2000);
		}
	},'json');

  });
  //回复js
  $(".resp").click(function(){
  	var id=$(this).attr('data-id');
  	   $("#comment_"+id).show();
	   $("[data-res="+id+"]").show();
	  
	   
  });
  $(".doresp").click(function(){
  	  var gid="<{$comments[0].goods_id}>";
	  var user_id="<{$Think.session.uid}>";
	  var user_name="<{$Think.session.username}>";
      var id=$(this).attr('data-res');
  	  var comment=$('#comment_'+id).val();
				 if(comment==''){
				 	return false;
				 }				
			  	$.post("<{:U('ProductComment/doresponse')}>",{goods_id:gid,user_id:user_id,user_name:user_name,content:comment,fid:id},function(data){
					if(data.status==1){	
					        $("#comment_"+id).hide();
                    	    $(".doresp").hide();
							$('#msg').text(data.msg);
							$('#msg').css("display","block");
							setTimeout(function(){$('#msg').fadeOut('slow');},2000);
							location.reload();
						}else{
							$('#msg').text(data.msg);
							$('#msg').css("display","block");
						setTimeout(function(){$('#msg').fadeOut('slow');},2000);		
						}
				},'json');
  	
  });
  //删除评论
  $('.del').click(function(){
  	var id=$(this).attr('data-id');
	console.log(id);
  	$( "<div>删除后不可恢复！确定要删除？</div>" ).dialog({
	     title:'删除确认',
		 modal: true,
	      buttons: {
	        "确定": function() {
				$(this ).dialog( "close" ); 
			$.get('<{:U("ProductComment/delcomment")}>',{id:id},function(data){
					if(data.status==1){
					    $("#type_"+id).remove();
						$('#msg').text(data.msg);
						$('#msg').css("display","block");	
						setTimeout(function(){$('#msg').fadeOut('slow')},1000);	
							
					}else{			
						$('#msg').text(data.msg);
							$('#msg').css("display","block");
					setTimeout(function(){$('#msg').fadeOut('slow');},1000);		
					}
				},'json');	
	        },
	        "取消": function() {
	          $( this ).dialog( "close" );
	        }
	      }
	    });
  	
  });
	 
  
  
  
   
});
</script>	
</block>